import React, { Component } from "react";
import { Card, Button } from "antd";
import "./App.css";
import { inject, observer } from "mobx-react";

@inject("appInstance")
@observer
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasWeight: 0,
      noHasWeight: 0,
    };
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    let hasWeight = 0;
    let noHasWeight = 0;
    nextProps.appInstance.hasAppLists.forEach((ele) => {
      hasWeight += ele.weight;
    });
    nextProps.appInstance.noHasAppLists.forEach((ele) => {
      noHasWeight += ele.weight;
    });

    return {
      hasWeight,
      noHasWeight,
    };
  }
  render() {
    console.log(this.props);
    console.log(this.state);
    const {
      hasAppLists,
      noHasAppLists,
      addApp,
      changeStatus,
    } = this.props.appInstance;
    const { hasWeight, noHasWeight } = this.state;
    return (
      <>
        <h1 className="rootTitle">拉勾4-2作业</h1>
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <Card style={{ width: 600 }}>
            <h2
              style={{
                color: "#326897",
                fontWeight: 900,
                textAlign: "center",
              }}
            >
              苹果篮子
            </h2>
            <div
              style={{
                height: "0px",
                borderBottom: "1px dashed #ccc",
              }}
            ></div>
            <div
              style={{
                height: "100px",
                borderBottom: "1px dashed #ccc",
                display: "flex",
              }}
            >
              <div
                style={{
                  flex: 1,
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                }}
              >
                <div
                  style={{
                    color: "#326897",
                    fontWeight: 900,
                  }}
                >
                  当前
                </div>
                <div>
                  {hasAppLists.length}个苹果&nbsp;&nbsp;&nbsp;{hasWeight}克
                </div>
              </div>
              <div
                style={{
                  flex: 1,
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                }}
              >
                <div
                  style={{
                    color: "#326897",
                    fontWeight: 900,
                  }}
                >
                  已吃掉
                </div>
                <div>
                  {noHasAppLists.length}个苹果&nbsp;&nbsp;&nbsp;{noHasWeight}克
                </div>
              </div>
            </div>
            <div
              style={{
                margin: "20px",
              }}
            >
              {hasAppLists.length === 0 ? (
                <div
                  style={{
                    color: "#ccc",
                    fontWeight: 900,
                    display: "flex",
                    justifyContent: "center",
                    minHeight: "100px",
                    alignItems: "center",
                  }}
                >
                  苹果篮子空空如也
                </div>
              ) : (
                hasAppLists.map((ele) => {
                  return (
                    <div
                      key={ele.title}
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                        margin: "10px 0",
                      }}
                    >
                      <div>
                        {ele.title}&nbsp;&nbsp;&nbsp;{ele.weight}克
                      </div>
                      <Button
                        type="primary"
                        danger
                        onClick={changeStatus.bind(this, ele.title)}
                      >
                        吃掉
                      </Button>
                    </div>
                  );
                })
              )}
            </div>
            <div
              style={{
                display: "flex",
                justifyContent: "center",
              }}
            >
              <Button type="primary" onClick={addApp}>
                摘苹果
              </Button>
            </div>
          </Card>
        </div>
      </>
    );
  }
}
export default App;
